<template>
  <div class="full-page-1">
    <audio ref="audio" preload="auto" :src="jump" type="audio/mp3" />
    <div class="full-page-1-title" :class="{ 'active': textActive }"  @click="textClick">{{t('page1.text')}}</div>
    <div class="my-36 flex-ajc">
      <el-button type="primary" plain @click="support">{{t('page1.btn1')}}</el-button>
      <el-button type="success" plain @click="moveToNext">{{t('page1.btn2')}}</el-button>
    </div>
    <div class="flex-ajc cursor-pointer">
      <el-tooltip  effect="dark" content="weixin" placement="bottom">
        <svg-icon name="wechat"  class="mx-4" color="green" ></svg-icon>
      </el-tooltip>
      <el-tooltip  effect="dark" content="QQ" placement="bottom">
        <svg-icon name="qq" class="mx-4 text-blue-500"></svg-icon>
      </el-tooltip>
      <el-tooltip  effect="dark" content="GitHub" placement="bottom">
        <svg-icon name="github" class="mx-4 text-gray-500"></svg-icon>
      </el-tooltip>
      <el-tooltip  effect="dark" content="1092331737@qq.com" placement="bottom">
        <svg-icon name="email" class="mx-4 text-amber-500" ></svg-icon>
      </el-tooltip>
    </div>
    <el-image v-if="textActive" :src="hand" class="full-page-1-hand" :class="{'active': textActive}"> </el-image>
    <div class="absolute  w-36 h-36  top-36 -left-10 lg:left-16 lg:top-48 md:left-16 md:top-48" >
      <div class="full-page-1-ml relative  opacity-0 transition-all duration-700" :class="{'active': mlActive }">
        <el-image :src="ml1" class="ml-1 scale-50 absolute left-0 top-11 z-20" ></el-image>
        <el-image :src="ml2" class="ml-2 scale-35 absolute left-0 top-11" ></el-image>
        <el-image :src="ml3" class="ml-3 scale-25 absolute left-0 top-28"></el-image>
      </div>
    </div>
    <el-image class="bg-image"  :src="bg" fit="cover" lazy> </el-image>
  </div>
</template>
<script setup name="fullPage1">
const { t } = useI18n();
const textActive = ref(false);
const textClick = () => {
  if (textActive.value) {
    return;
  }
  textActive.value = true;
  setTimeout(() => {
    textActive.value = false;
  }, 3000);
};

const emits = defineEmits(['moveToNext']);
const moveToNext = () => {
  emits('moveToNext');
};

const jump = useAssets('media/jump.mp3');
const audio = ref();
const bg = useAssets('images/p1.jpg');
const hand = useAssets('images/png/hand.png');
const ml1 = useAssets('images/png/mlzt.png');
const ml2 = useAssets('images/png/mljb.png');
const ml3 = useAssets('images/png/ml.png');
const mlActive = ref(false);
const support = () => {
  if (mlActive.value) {
    return;
  }
  mlActive.value = true;
  audio.value.volume = 0.5;
  audio.value.pause();
  audio.value.currentTime = 0;
  audio.value.play();
  setTimeout(() => {
    mlActive.value = false;
  }, 1300);
};

</script>
<style scoped lang="scss">
.full-page-1 {
  &-title {
    @apply  text-center font-bold  text-2xl my-24  cursor-pointer
            uppercase tracking-widest italic overflow-hidden  bg-clip-text text-transparent lg:text-6xl lg:my-56;
    background: {
      position: center;
      size: cover;
      image: url("@/assets/images/font.jpg");
    };
    &.active {
      animation: pulse 1s 2s;
    }
  }
  &-hand {
    @apply absolute left-0  opacity-0 -bottom-80 z-30;
    &.active {
      animation: handRotate 1s forwards, moveRight 1.5s 1s forwards, moveDown 1.5s 2.5s forwards;
    }
  }
  &-ml {
    &.active {
      @apply opacity-100;
      .ml-1{
        @apply opacity-100;
      }
      .ml-2 {
        animation: ml2 1s  .3s;
      }
      .ml-3{
        animation: ml1 1.2s;
      }
    }
  }
}

@keyframes handRotate {
  0%{
    opacity: 0;
    transform: rotate(45deg);
  }
  100%{
    opacity: 1;
    transform: rotate(0);
  }
}

@keyframes moveRight {
    to{
      transform: translate(76em, -16em);
   }
}

@keyframes moveDown {
  from{
  }to{
     opacity: 0;
     transform: translateY(100%);
   }
}

@keyframes ml1 {
  50%{
    @apply top-20;
  }
  100%{
    @apply top-28;
  }
}

@keyframes ml2 {
  100%{
    @apply -top-20 opacity-0;
  }
}
</style>
